<template>
    <el-select
        ref="select"
        v-model="data"
        clearable
        filterable
        remote
        :placeholder="placeholder"
        @clear="clearModelData"
    >
        <el-option
            v-for="item in option"
            :key="item.id"
            :label="item.label"
            :value="item.label"
            @click="handleOptionClick(item.label)"
        >
            {{ item.label }}
        </el-option>
    </el-select>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
    props: {
        modelData: {
            type: String,
            default: "",
        },
        placeholder: {
            type: String,
            default: "",
        },
        //初始化option
        option: {
            type: Array,
            default: () => [],
        }
    },
    emits: ["update:modelData", "getOption", "clearItem"],
    computed: {
        data: {
            get() {
                return this.modelData;
            },
            set(value) {
                this.$emit("update:modelData", value);
            },
        },
    },
    data() {
        return {
            data: ''
        };
    },
    methods: {
        /**
         * 返回选择的option
         * @param {object} data - 选择的option
         */
        handleOptionClick(label) {
            // this.data = label
            this.$emit("getOption", label);
        },
        clearModelData() {
            this.data = ''
            this.$emit("update:modelData", '');
            this.$emit("clearItem", '')
        }
    },
    watch: {},
    mounted() {
        
    },
});
</script>

<style lang="scss" scoped>

</style>
